<template>
  <div>
    <h3>富文本</h3>
    <pre>
        插件名:vue-quill-editor
        使用：
           1：安装插件  
              npm i vue-quill-editor
           2:导入
              导入组件与样式
              import 'quill/dist/quill.core.css'
              import 'quill/dist/quill.snow.css'
              import 'quill/dist/quill.bubble.css'
              import { quillEditor } from 'vue-quill-editor'
          
           3：注册
              components: {
                quillEditor
              }
           4：当标签使用
             quillEditor
           使用属性与方法
              属性方法：v-model  :双向绑定  
                       blur  失去焦点时触发的方法
                       change  值改变时触发
                       options
                       disabled。。。
    </pre>
    <h3>{{ txt }}</h3>
    <div style="width:800px;margin:0 auto;padding-bottom:500px;">
      <quillEditor
        v-model="txt"
        @blur="blurEvent"
        @change="changeEvent"
        disabled
        :options="{
          placeholder: '请输入内容'
        }"
      ></quillEditor>
    </div>
  </div>
</template>
<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
export default {
  components: {
    quillEditor
  },
  data () {
    return {
      txt: ''
    }
  },
  methods: {
    blurEvent (e) {
      console.log('blurEvent', e)
    },
    changeEvent (e) {
      console.log('change', e)
    }
  }
}
</script>
<style></style>
